<template>
  <div id="mains">
    <div class="topInput">
      <div class="topBox topbtn">
        <div class="topbtnInner">
          <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          <el-button type="primary">删除</el-button>

          <el-dialog title="员工出差单" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="出差开始时间" :label-width="formLabelWidth">
                <el-input v-model="form.startTime" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="出差结束时间" :label-width="formLabelWidth">
                <el-input v-model="form.endTime" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="出差人" :label-width="formLabelWidth">
                <el-input v-model="form.who" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="交通工具" :label-width="formLabelWidth">
                <el-input v-model="form.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="单程往返" :label-width="formLabelWidth">
                <el-input v-model="form.back" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="出发城市" :label-width="formLabelWidth">
                <el-input v-model="form.startCity" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="到达城市" :label-width="formLabelWidth">
                <el-input v-model="form.endCity" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="审批人" :label-width="formLabelWidth">
                <el-input v-model="form.seeMan" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="抄送人" :label-width="formLabelWidth">
                <el-input v-model="form.sendMan" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false,sub()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>

    <div class="tables">
      <div id="app">
                <div class="innerTableBox">
        <div class="innerTable">
          <el-table
          :header-cell-style="rowClass"
            :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%;margin:0 auto;text-align:center;"
          >
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column prop="date" align="center" label="申请日期" min-width="30%"></el-table-column>
            <el-table-column prop="name" align="center" label="姓名" min-width="30%"></el-table-column>
            <el-table-column prop="startCity" align="center" label="出发城市" min-width="30%"></el-table-column>
            <el-table-column prop="endCity" align="center" label="到达城市" min-width="30%"></el-table-column>
            <el-table-column prop="way" align="center" label="交通工具" min-width="30%"></el-table-column>
            <el-table-column prop="address" align="center" label="状态" min-width="30%"></el-table-column>
            <el-table-column align="right">
              <template slot="header">
                <el-input
                  prefix-icon="iconfont icon-sousuo"
                  v-model="searchTableInfo"
                  placeholder="请输入搜索内容"
                  style="width:240px"
                ></el-input>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </div>

        <!-- 查看详情模态框 -->
        <el-dialog title="查看详情" :visible.sync="dialogdetails" v-if="dialogdetails">
          <el-form :model="dialogdetailsInfo">
            <el-form-item label="申请日期" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.date" autocomplete="off" readonly ></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.name" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="出发城市" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.startCity" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="交通工具" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.way" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-input v-model="dialogdetailsInfo.address" autocomplete="off" readonly></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogdetails = false">取 消</el-button>
            <el-button type="primary" @click="dialogdetails = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 查看详情模态框 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          class="pageS"
        ></el-pagination>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "mains",
  data() {
    return {
      dialogdetails: false,
      dialogdetailsInfo: {},
      searchTableInfo: "",
      pagesize: 6,
      currpage: 1,
      getSearchInfo: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      inputState: true,
      showText: "收起",
      iconShow1: true,
      iconShow2: false,
      currentPage: 1,
      size: 5,
      form: {
        endTime: "",
        startTime: "",
        who: "",
        type: "",
        back: "",
        startCity: "",
        seeMan: "",
        sendMan: "",
        endCity: "",
      },
      search: "",
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogdetails = true;
      this.dialogdetailsInfo = {
        address: row.address,
        date: row.date,
        endCity: row.endCity,
        name: row.name,
        startCity: row.startCity,
        way: row.way,
      };
    },
        rowClass({row,rowIndex}){
      return'line-height:35px'
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    //操作多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    info(pushobj) {
      console.log("进入调用了");
      console.log(pushobj);
      //这些数据视情况，是你从后端拿来的。
      let datas = [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "审批通过",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批通过",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批通过",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批中",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批中",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批中",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批中",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "审批失败",
          startCity: "成都",
          endCity: "重庆",
          way: "步行",
        },
      ];
      //   datas.push(pushobj)
      //   console.log(datas);
      this.getSearchInfo = datas;
    },
    sub() {
      console.log("进了");
      console.log(this.form);
      if (
        this.form.endTime !== "" &&
        this.form.startTime !== "" &&
        this.form.who !== "" &&
        this.form.type !== "" &&
        this.form.back !== "" &&
        this.form.startCity !== "" &&
        this.form.seeMan !== "" &&
        this.form.sendMan !== "" &&
        this.form.endCity !== ""
      ) {
        console.log("填好了");
        let pushObj = {
          date: this.form.startTime,
          name: this.form.who,
          address: "审批中",
          startCity: this.form.startCity,
          endCity: this.form.endCmsgty,
          way: this.form.type,
          endCity: this.form.endCity,
        };
        this.getSearchInfo.push(pushObj),
          // this.info(pushObj);
          // this.getSearchInfo.push({
          //   date: this.form.startTime,
          //   name: this.form.who,
          //   address: "审批中",
          //   startCity: this.form.startCity,
          //   endCity: this.form.endCmsgty,
          //   way: this.form.type,
          //   endCity: this.form.endCity,
          // });

          (this.form.endTime = ""),
          (this.form.startTime = ""),
          (this.form.who = ""),
          (this.form.type = ""),
          (this.form.back = ""),
          (this.form.startCity = ""),
          (this.form.endCmsgty = ""),
          (this.form.seeMan = ""),
          (this.form.sendMan = ""),
          (this.form.endCity = "");
      } else {
        alert("表中有未填项，请继续填写");
      }
    },
  },
  computed: {
    // 根据计算属性模糊搜索
    tableData() {
      const searchTableInfo = this.searchTableInfo;
      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.getSearchInfo.filter((data) => {
          console.log("success" + data);
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
            );
          });
        });
      }
      return this.getSearchInfo;
    },
  },
  created() {
    this.info();
  },
};
</script>

<style scoped>
.pageS{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.el-table__header thead {
    line-height: 35px!important
}
.tables{
  padding-top: 0;
}
.pageBox {
  margin-left: 50%;
  margin: 0 auto;
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.innerTableBox{
    box-shadow: 0 0 3px 1px #e4e4e4;
  width: 100%;
  height: auto;
}
.innerTable {
  width: 80%;
  padding:30px 0;
  margin: 0 auto;
}
#app {
  width: 100%;
}

.txtBtn {
  margin-left: 10px;
  width: 60%;
}

.topbtnInner {
  width: 60%;
}

.topbtn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#mains {
  height: 850px;
}

.el-main {
  line-height: 50px !important
}

.el-input {
  width: 70% !important;
}

.topInput {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.topBox {
  margin-left: 7.1%;
  width: 25%;
  height: 100%;
}
</style>
